import xss from "xss"
<template>
  <j-modal
    :title="title"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :switchFullscreen="switchFullscreen"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="toHandle">去处理</a-button>
    </template>
    <a-card class="daily-article" :loading="loading">
      <a-card-meta :title="record.titile" :description="'发布人：' + record.sender + ' 发布时间： ' + record.sendTime">
      </a-card-meta>
      <a-divider />
      <span v-html="record.msgContent" class="article-content"></span>
    </a-card>
  </j-modal>
</template>

<script>
import { getUserList } from '@/api/api'
import { getAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import xss from 'xss'
export default {
  name: 'SysAnnouncementModal',
  components: {},
  data() {
    return {
      title: '通知消息',
      record: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visible: false,
      switchFullscreen: true,
      loading: false,
      bodyStyle: {
        padding: '0',
        height: window.innerHeight * 0.8 + 'px',
        'overflow-y': 'auto',
      },
      modelStyle: {
        width: '60%',
        style: { top: '20px' },
        fullScreen: false,
      },
    }
  },
  created() {},
  methods: {
    detail(record) {
      //update-begin---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名
      if (record.sender) {
        getUserList({ username: record.sender }).then((res) => {
          if (res.success && res.result.records.length > 0) {
            record.sender = res.result.records[0].realname
          }
        })
      }
      //update-end---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名
      this.visible = true
      //update-begin-author:taoyan date:2022-7-14 for: VUEN-1702 【禁止问题】sql注入漏洞
      if (record.msgContent) {
        record.msgContent = xss(record.msgContent)
      }
      //update-end-author:taoyan date:2022-7-14 for: VUEN-1702 【禁止问题】sql注入漏洞
      this.record = record
    },
    handleCancel() {
      this.visible = false
    },
    /** 切换全屏显示 */
    handleClickToggleFullScreen() {
      let mode = !this.modelStyle.fullScreen
      if (mode) {
        this.modelStyle.width = '100%'
        this.modelStyle.style.top = '20px'
      } else {
        this.modelStyle.width = '60%'
        this.modelStyle.style.top = '50px'
      }
      this.modelStyle.fullScreen = mode
    },
    toHandle() {
      // if(this.record.openType==='url'){
      this.visible = false
      //链接跳转
      // demandFeedback/ChDemandFeedbackList
      localStorage.setItem('news2', localStorage.getItem('news'))
      console.log(this.$route.path)
      if (this.$route.path == '/ChDemandFeedbackList') {
        // this.handleEdit(JSON.parse(localStorage.getItem('news2')))
        this.$router.push({
          path: '/ChDemandFeedbackList',
          query: {
            t: Date.now(),
          },
        })
      } else {
        this.$router.push({ path: '/ChDemandFeedbackList' })
      }

      // }
    },
  },
}
</script>

<style lang="less">
.announcementCustomModal {
  .ant-modal-header {
    border: none;
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 56px;
    padding: 0;
    .ant-modal-title {
      .custom-btn {
        width: 56px;
        height: 56px;
        border: none;
        box-shadow: none;
      }
    }
  }
  .daily-article {
    border-bottom: 0;
  }
}
</style>
<style scoped lang="less">
.daily-article {
  .article-button {
    font-size: 1.2rem !important;
  }
  .ant-card-body {
    padding: 18px !important;
  }
  .ant-card-head {
    padding: 0 1rem;
  }
  .ant-card-meta {
    margin-bottom: 1rem;
  }
  .article-content {
    p {
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: initial;
      white-space: normal;
      font-size: 0.9rem !important;
      margin-bottom: 0.8rem;
    }
  }
}
</style>
